<template>
    <m-popup-pannel ref="popup" title="金额明细" :bottom="bottom" @change="(val:any)=>emits('change',val)">
        <uni-section title="商品总额">
            <template v-slot:right>
                <text class="m-cart-price-detail">￥{{ props.totalPrice }}</text>
            </template>
        </uni-section>
        <scroll-view scroll-y class="m-cart-spec-scroll-view">
            <uni-section
                v-for="item in favors"
                :title="item.type == 1 ? '活动' : '优惠券'"
                :sub-title="item.type == 1 ? item.activity?.name : item.coupon?.coupon.name"
            >
                <template v-slot:right>
                    <text class="m-cart-price-detail">-￥{{ item.amount }}</text>
                </template>
            </uni-section>
        </scroll-view>
    </m-popup-pannel>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import MPopupPannel from '@/components/common/MPopupPannel.vue'
const props = defineProps({
    totalPrice: Number,
    favors: Array<Favor>,
    bottom: String
})
const popup = ref<InstanceType<typeof MPopupPannel> | null>(null)
defineExpose({
    close: () => popup.value?.close(),
    open: () => popup.value?.open()
})
const emits = defineEmits(['change'])
</script>

<style lang="scss" scoped>
.m-cart-price-detail {
    font-weight: bold;
}
.m-cart-spec-scroll-view {
    height: 65vh;
}
</style>
